<!DOCTYPE html>
[#assign ctx=springMacroRequestContext.contextPath/]
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="${ctx!}/statics/layui/css/layui.css" media="all">
  <script type="text/javascript" src="${ctx}/statics/layui/layui.js"></script>
  <script src="${ctx}/statics/js/jquery-3.6.0.js"></script>
  <script src="${ctx}/statics/js/echarts.min.js"></script>
</head>
<body>

<div class="layui-layout layui-layout-admin">

  [#include "/common/headNav.html"]
  [#include "/common/sideNav.html"]

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item"><a href="javascript:;">menu item 123</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li>
      </ul>
    </div>
  </div>

  <div class="layui-body">
    <!-- 内容主体区域 -->
    <!--为echarts准备一个容器，画图就画在里面-->

    <div class="layui-col-xs6">
      <div id="box" style="width: 400px;height: 400px;margin-left: 100px;margin-top: 50px"></div>
      <div id="totalBox" style="width: 400px;height: 400px;margin-left: 100px"></div>
    </div>

    <div class="layui-col-xs6">


      <form class="layui-form" >
        <div class="layui-form-item" >
          <div class="layui-input-inline">
            <label class="layui-form-label" style="margin-top: 50px;margin-right: 50px;width:150px">
              净值曲线时间跨度选择:
            </label>
            <div class="layui-input-inline" style="margin-top: 10px;">
              <select id="brickType"  lay-filter="brickType">
                <option value="1" selected="">7天</option>
                <option value="2">30天</option>
              </select>
            </div>

          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-inline">
            <label>当前基金单位净值
            </label>
            <input id="netWorth" name="netWorth" class="layui-input" readonly="readonly" style="margin-top: 10px;width:300px">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-inline">
            <label>单位净值日涨幅</label>
            <input id="dayGrowth" name="dayGrowth" class="layui-input" readonly="readonly" style="margin-top: 10px;width:300px">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-inline">
            <label>净值估算</label>
            <input id="expectWorth" name="expectWorth" class="layui-input" readonly="readonly" style="margin-top: 10px;width:300px ">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-inline">
            <label>近一个月</label>
            <input id="lastMonthGrowth" name="lastMonthGrowth" class="layui-input" readonly="readonly" style="margin-top: 10px;width:300px ">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-inline">
            <label>近三个月</label>
            <input id="lastThreeMonthsGrowth" name="lastThreeMonthsGrowth" class="layui-input" readonly="readonly" style="margin-top: 10px;width:300px ">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-inline">
            <label>近六月</label>
            <input id="lastSixMonthsGrowth" name="lastSixMonthsGrowth" class="layui-input" readonly="readonly" style="margin-top: 10px;width:300px ">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-inline">
            <label>近一年</label>
            <input id="lastYearGrowth" name="lastYearGrowth" class="layui-input" readonly="readonly" style="margin-top: 10px;width:300px ">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-inline">
            <label>请输入您要购买的金额</label>
            <input id="amount2buy" name="amount2buy" placeholder="请输入您要购买的金额" class="layui-input" style="margin-top: 10px;">
            <button class="layui-btn layui-btn-warm" lay-submit lay-filter="form1" style="margin-top: 10px;">购买</button>
          </div>
        </div>
      </form>


    </div>

  </div>

<!--  <div class="layui-footer">-->
    <!-- 底部固定区域 -->
  </div>
</div>

<script type="text/javascript">


  layui.use(['layer','form'],function () {
    var form=layui.form;
    var layer = layui.layer;

    form.on('submit(form1)',function (data){
      $.post("/trade/buy", {amount2buy: data.field.amount2buy,code:'${code}'}, res=>{
        switch (res.code) {
          case 200:
            layer.msg(res.msg, {icon:1});
            break;
          case 500:
            layer.msg(res.msg, {icon:2});
            break;
        }
      });
      return false;
    })

    form.on('select(brickType)', function(data){
      var val=data.value;
      getChartData(val);

    });

    layer.ready(function () {
      getChartData(1);
    })
  })



  function getChartData(type) {

    $.ajax({
      url: "/productDetail/getData",
      type: "post",
      data: {
        code:"${code}",
        type: type
      },
      success: function (data) {
        var netWorth = data.netWorth;
        var dayGrowth = data.dayGrowth;
        var expectWorth = data.expectWorth;
        var lastMonthGrowth = data.lastMonthGrowth;
        var lastThreeMonthsGrowth = data.lastThreeMonthsGrowth;
        var lastSixMonthsGrowth = data.lastSixMonthsGrowth;
        var lastYearGrowth = data.lastYearGrowth;
        var expectWorthDate = data.expectWorthDate;
        var netWorthData = data.netWorthData;
        var totalNetWorthData = data.totalNetWorthData;
        var dataX = [];
        var dataY1 = [];
        var dataY2 = [];
        for(var i=0;i<netWorthData.length;i++){
          dataX.push(netWorthData[i][0]);
          dataY1.push(netWorthData[i][1]);
          dataY2.push(totalNetWorthData[i][1]);
        }
        setCharts(dataX,dataY1,dataY2);
        $('#netWorth').val(netWorth);
        $('#dayGrowth').val(dayGrowth);
        $('#expectWorth').val(expectWorth+"("+ expectWorthDate +")")
        $('#lastMonthGrowth').val(lastMonthGrowth);
        $('#lastThreeMonthsGrowth').val(lastThreeMonthsGrowth);
        $('#lastSixMonthsGrowth').val(lastSixMonthsGrowth);
        $('#lastYearGrowth').val(lastYearGrowth);
      },
      error: function (err) {
        layer.msg("未获取到api数据");
      }
    })
  }



  function setCharts(dataX,dataY1,dataY2) {
    //初始化ehcharts实例
    var box=echarts.init(document.getElementById("box"));
    var totalBox=echarts.init(document.getElementById("totalBox"));
    //指定图表的配置项和数据
    var option={
      //标题
      title:{
        text:'单位净值'
      },
      //工具箱
      tooltip : {
        trigger: 'axis',
        formatter(params){
            return  params[0].seriesName +":"+params[0].value;
        }
      },
      //图例-每一条数据的名字叫销量
      legend:{
        data:['单位净值']
      },
      //x轴
      xAxis:{
        data:dataX
      },
      //y轴没有显式设置，根据值自动生成y轴
      yAxis:
      {
        type : 'value',
        axisLabel : {
          formatter: '{value}'
        }
        ,splitLine: {
          show: false
        },
        scale:true,/*按比例显示*/
      },
      //数据-data是最终要显示的数据
      series:[
        {
          name:'单位净值',
          type:'line',
          data:dataY1
        }
      ]
    };
    var option1={
      //标题
      title:{
        text:'累计净值'
      },
      tooltip : {
        trigger: 'axis',
        formatter(params){
          return  params[0].seriesName +":"+params[0].value;
        }
      },
      //图例-每一条数据的名字叫销量
      legend:{
        data:['累计净值']
      },
      //x轴
      xAxis:{
        data:dataX
      },
      //y轴没有显式设置，根据值自动生成y轴
      yAxis:{
        type : 'value',
        axisLabel : {
          formatter: '{value}'
        }
        ,splitLine: {
          show: false
        },
        scale:true,/*按比例显示*/
      },
      //数据-data是最终要显示的数据
      series:[
        {
          name:'累计净值',
          type:'line',
          data:dataY2
        }
      ]
    };
    //使用刚刚指定的配置项和数据项显示图表
    box.setOption(option);
    totalBox.setOption(option1);
  }
</script>

</body>
</html>